<template>
  <el-container>
        <!-- 顶部 -->
        <el-header>
            <!-- 顶部导航栏 -->
            <div>
                <div @click="routerPush('/index')">
                    <el-avatar shape="square" :src="logoSrc"></el-avatar>
                    <span>&nbsp;&nbsp;&nbsp;Comic漫漫</span>
                </div>
                <div>
                </div>
            </div>
    </el-header>
    <!-- 在使用表单验证时，需要注意：
    1.必须给表单对象绑定一个对象：:model="loginForm"，而且不能写成：v-model="loginForm"
    2.所有的子控件的绑定对象必须是表单对象的内部对象，比如：v-model="loginForm.username"，否则总是验证失败
     -->
    <el-main>
      <el-tabs type="border-card">
        <el-tab-pane label="登录">
              <el-form class="login-container" :model="loginForm" ref="loginForm"
                    :rules="loginRules" label-position="left">
                <h3 class="login-title">Comic登录</h3>
                <el-form-item prop="email">
                  <el-input type="text" v-model="loginForm.email" auto-complete="off" placeholder="邮箱账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-checkbox class="login-remember" v-model="checked">记住密码</el-checkbox>
                <el-form-item>
                  <el-button class="login-button" type="primary" @click="loginFormClick('loginForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册">
              <el-form class="login-container" :model="registerForm" ref="registerForm"
                    :rules="registerRules" label-position="left">
                <h3 class="login-title">Comic注册</h3>
                <el-form-item prop="email">
                  <el-input type="text" v-model="registerForm.email" auto-complete="off" placeholder="邮箱账号"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input type="text" v-model="registerForm.code" auto-complete="off" placeholder="验证码">
                    <el-button slot="append" @click="getCode(registerForm.email)">获取验证码</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item prop="username">
                  <el-input type="text" v-model="registerForm.username" auto-complete="off" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" v-model="registerForm.password" auto-complete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="login-button" type="primary" @click="registerFormClick('registerForm')">注册</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="忘记密码">
            <el-form class="login-container" :model="forgetForm" ref="forgetForm"
                    :rules="forgetRules" label-position="left">
                <h3 class="login-title">Comic修改密码</h3>
                <el-form-item prop="email">
                  <el-input type="text" v-model="forgetForm.email" auto-complete="off" placeholder="邮箱账号"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input type="text" v-model="forgetForm.code" auto-complete="off" placeholder="验证码">
                    <el-button slot="append" @click="getCode(forgetForm.email)">获取验证码</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item prop="newPassword">
                  <el-input type="password" v-model="forgetForm.newPassword" auto-complete="off" placeholder="新密码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="login-button" type="primary" @click="forgetFormClick('forgetForm')">修改</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import LogoSrc from '@/assets/icon/comic.png'
import Api from '@/api/index';

export default {
  name: "Login",
  data() {
    return {
      logoSrc: LogoSrc,
      // 提醒规则
      loginRules: {
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 10, max: 20, message: '长度在需在10至20个字符之间', trigger: 'blur' }
        ]
      },
      registerRules: {
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur'},
          { min: 6, max: 6, message: '长度需为6个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 10, max: 20, message: '长度在需在10至20个字符之间', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入昵称', trigger: 'blur'},
          { min: 2, max: 10, message: '长度在需在2至10个字符之间', trigger: 'blur' }
        ]
      },
      forgetRules: {
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur'},
          { min: 6, max: 6, message: '长度需为6个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 10, max: 20, message: '长度在需在10至20个字符之间', trigger: 'blur' }
        ]
      },
      //登录信息, 用户名密码,先从缓存中获取
      loginForm: {
        email: this.$store.state.common.email,
        password: this.$store.state.common.userPwd
        // email: localStorage.getItem('email'),
        // password: localStorage.getItem('userPwd')
      },
      //注册信息, 邮箱,用户名,密码,验证码
      registerForm: {
        email: '',
        code: '',
        password: '',
        username: ''
      },
      //忘记密码, 邮箱,验证码,新密码
      forgetForm: {
        email: '',
        code: '',
        newPassword: ''
      },
      //是否保存用户名和密码;默认不保存
      checked: this.$store.state.common.checked
    }
  },
  methods: {
    //点击跳转界面  
    routerPush(url){
      //   this.$router.push({path: url})
        let newWindow = this.$router.resolve({path: url})
        window.open(newWindow.href,'_blank')
    },
    /** 
     * 登录逻辑
     */  
    loginFormClick(loginForm) {
      //是否保存密码
      this.$store.commit('common/update_checked',this.checked);
      // console.log(localStorage.getItem('checked'))
      //保存密码
      // console.log(this.checked)
      if(this.checked){
          this.$store.commit('common/update_email',this.loginForm.email);
          this.$store.commit('common/update_userPwd',this.loginForm.password);
      }else{
          this.$store.commit('common/update_email','');
          this.$store.commit('common/update_userPwd','');
      }
      // 表单验证,发送请求
      this.$refs[loginForm].validate(valid => {        
        if(valid) {
          let requestData = {'email': this.loginForm.email, 
                              'passWord': this.loginForm.password
                            };
          Api.getLoginGetToken(requestData).then(response => {
            // console.log(response.data)
            // console.log(response.data.code == 200)
            if(response.data.code == 200){
              //存储token , 用户名 , 用户头像信息, 用户权限
              this.$store.commit('common/update_token',response.data.data.jwtToken);
              this.$store.commit('common/update_username',response.data.data.userName);
              this.$store.commit('common/update_avatar',response.data.data.avatar);
              this.$store.commit('common/update_userId',response.data.data.id);
              this.$store.commit('common/update_superAdmin',response.data.data.superAdmin);
              console.log("相应数据: " + response.data.data.superAdmin + "\n" + '存储数据: ' + this.$store.state.common.superAdmin)
              // 跳转到主页
              this.$router.push("Index")
              this.$notify({
                title: '提示',
                message: '登录成功',
                position: 'bottom-left',
                type: 'success'
              });
            }
          })
        } else {
          this.$notify({
            title: '提示',
            message: '邮箱或密码格式不正确,请检查修改后再尝试重新登录',
            position: 'bottom-left',
            type: 'error'
          });
        }
      })
    },
    /** 
     * 注册逻辑
     */
    //获取验证码
    getCode(email){
      let emailRe = new RegExp("[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+","g");
      if(email == null || !emailRe.test(email)){
        this.$notify({
            title: '提示',
            message: '请先输入正确的邮箱账号再尝试获取验证码',
            position: 'bottom-left',
            type: 'error'
          });
      }else{
        Api.getLoginGenerateEmailCode(email).then(response => {
          if(response.data.code == 200){
              this.$notify({
                title: '提示',
                message: '验证码已发送至邮箱',
                position: 'bottom-left',
                type: 'success'
              });
          }
        })
      }
    },
    //注册
    registerFormClick(registerForm){
      //验证表单,发送请求
      this.$refs[registerForm].validate(valid => {        
        if(valid) {
          let requestData = { 'email': this.registerForm.email,
                              'verifyCode': this.registerForm.code,
                              'passWord': this.registerForm.password,
                              'userName': this.registerForm.username
                            };
          Api.getLoginRegisterUserResource(requestData).then(response => {
            if(response.data.code == 200){
              this.$notify({
                title: '提示',
                message: '注册成功,请前往登录界面登录',
                position: 'bottom-left',
                type: 'success'
              });
            }
          })
        } else {
          this.$notify({
            title: '提示',
            message: '存在输入信息格式不正确,请检查修改后再尝试注册',
            position: 'bottom-left',
            type: 'error'
          });
        }
      })
    },
    /**
     * 忘记密码
     */
    forgetFormClick(forgetForm){
      this.$refs[forgetForm].validate(valid => {        
        if(valid) {
          let requestData = { "email": this.forgetForm.email,
	                            "password": this.forgetForm.newPassword,
	                            "verifyCode": this.forgetForm.code
                            };
          Api.getLoginForgetPasswordResource(requestData).then(response => {
            if(response.data.code == 200){
              this.$notify({
                title: '提示',
                message: '修改密码成功,请前往登录界面登录',
                position: 'bottom-left',
                type: 'success'
              });
            }
          })
        } else {
          this.$notify({
            title: '提示',
            message: '存在输入信息格式不正确,请检查修改后再尝试注册',
            position: 'bottom-left',
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.el-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url('../../assets/login/loginpicture2.jpg');
  background-size: cover;
  /* background-size: contain; */
}
.el-tabs{
  margin-top: calc(60px + 0px) !important;
  margin-left: calc(72% - 175px) !important;
  width: min-content;
  height: min-content;
  border-radius: 10px;
  box-shadow: 0 0 25px #cac6c6;
  /* filter: alpha(opacity=0); */
  /* visibility : hidden; */
  /* background-color: #fff; */
  border: 0px;
}
/* .el-tabs > :nth-child(n){
  border: 0px;
  border-radius: 10px 10px 0px 0px;
  padding: 0px !important;
  visibility:visible;
} */
.login-container{
  width: 310px;
  /* height: 305px; */
  /* margin: 40px auto; */
  background-clip: padding-box;
  padding: 35px 35px 15px 35px;
  /* border: 1px solid #eaeaea; */
  /* border-radius: 15px; */
  /* box-shadow: 0 0 25px #cac6c6; */
  background: #FFFFFF;
  border-radius: 0px 0px 10px 10px !important;
}
.login-title{
  margin: 0 auto 40px auto;
  text-align: center;
  color: #505458;
}
.login-remember{
  background-color: #FFFFFF !important;
  margin: 0 0 35px 0;
  text-align: center;
}
.login-button{
  width: 100%;
}
.el-header{
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0px;
    /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: center;
    position: sticky; */
    position: relative;
    padding-left: 10%;
    top:0px;
    z-index: 999;
    box-shadow: 0px 0px 5px 1px rgb(211, 211, 211);
}
/* 顶部栏 */
.el-header > div:first-child {
    /* width: 1160px; */
    /* width: 70%; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: center;
}
.el-header > div:first-child > div:nth-child(1){
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: flex-start;
    align-items: center;
}
.el-header > div:first-child > div:nth-child(2){
    visibility : hidden;
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    justify-content: flex-end;
}
.el-header > div:first-child > div:nth-child(2) > .el-menu:first-child{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
}
</style>